<!DOCTYPE html> 
<html>  
    <head>  
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />  
        <title>Events of {{ day }}</title>  
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
    </head>  

    <body> 
        <p><B>Source: </B><a title="source" href="http://en.wikipedia.org/wiki/{{ wiki_day }}#Births">Wikipedia</a></p> 
        <div id="map" style="width: 800px; height: 500px;"></div>  
        <script type="text/javascript" >
            var locations = [ 
                {% for birth_info_template in birth_info_templates %}
                [ {{ birth_info_template.events|safe }}, {{ birth_info_template.lat }}, {{ birth_info_template.lng }} ], 
                {% endfor %}
            ]; 
 

            function initialize() {
                var map = new google.maps.Map(document.getElementById('map'), 
                                              { 
                                                 zoom: 2, 
                                                 center: new google.maps.LatLng(0, 4),  
                                                 mapTypeId: google.maps.MapTypeId.ROADMAP 
                                              }         
                ); 

                var infowindow = new google.maps.InfoWindow(); 
     
                var marker, i; 
     
                for (i = 0; i < locations.length; i++) {   
                    marker = new google.maps.Marker({ 
                                        position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
                                        map: map }
                             ); 
     
                    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) { 
                        return function() { 
                            infowindow.setContent(locations[i][0]); 
                            infowindow.open(map, marker); 
                        } 
                    })(marker, i)); 
                } 
            }
 
            function loadScript() {
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = 'http://maps.googleapis.com/maps/api/js?sensor=false&' +
                                'callback=initialize';
                document.body.appendChild(script);
            }
        
            window.onload = loadScript;
        </script>
    </body>
</html>
